@charset "UTF-8";
*{margin:0;padding:0;font-family: "Microsoft yahei",serif;}
img{display:block;}
#box{
	position: relative;
	width:500px;
	height:700px;
	margin:30px auto;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}
#wrap{
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
	width:100%;
	height:100%;
	background:url("../images/bg_1.jpg");
}
#box #map{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#wrap h3.title{
	width:100%;
	margin:80px auto;
	color: #fff;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}
#wrap div{
	width:260px;
	height:40px;
	margin:60px auto;
	background:#44E1F5;
	color:#000;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s,color 0.3s;
}
#wrap div:hover{
	background:#1FEA5D;
	color: #fff;
}
#wrap .plane,#wrap .bullet,#wrap .enemy,#wrap .boom,#wrap .oPlane{
	position: absolute;
}
#wrap .boom{
	animation: fadeout 0.8s 1;
	animation-fill-mode: forwards;
}
#wrap .oPlane{
	animation: bling 2s 1;
	animation-fill-mode: forwards;
}
@keyframes fadeout{
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes bling{
	0%{opacity: 1;}
	20%{opacity: 0;}
	40%{opacity: 1;}
	60%{opacity: 0;}
	80%{opacity: 1;}
	100%{opacity: 0;}
}
#box #score{
	display: none;
	position: absolute;
	top:0;
	left:0;
	z-index: 100;
	width:80px;
	height:40px;
	background:orange;
	color: #fff;
	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height: 40px;
}
#box #final{
	display: none;
	position: absolute;
	z-index: 1000;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#box #final p{
	margin-top: 70px;
	text-align: left;
	font-size: 24px;
	color:#fff;
}
#box #final .over{
	width:100%;
	height:50px;
	margin-top: 80px;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	font-size: 40px;
	color: red;
}
#box #final .recond{
	width:230px;
	height:auto;
	margin-left:165px;
	text-align: left;
}
#box #final .recond #history{
	color: yellow;
	font-weight: bold;
	font-style: italic;
}
#box #final .recond #total{
	color: red;
	font-weight: bold;
	font-style: italic;
}
#box #final .recond #honor{
	color:orange;
	font-weight: bold;
	font-style: italic;
}
#box #final #reset{
	width:200px;
	height:40px;
	background:#fff;
	margin:100px auto;
	border-radius: 3px;
	text-align: center;
	line-height: 40px;
	color: #000;
	font-size: 24px;
	font-weight: bold;
	cursor:pointer;
	transition: color 0.3s,background 0.3s;
}
#box #final #reset:hover{
	background: #5637F6;
	color: #fff;
}
#box #final #break{
	position: absolute;
	top:-160px;
	left:50%;
	z-index: 9999;
	margin-left: -125px;
	width:250px;
	height:100px;
	background:purple;
	opacity: 1;
	transition: all 1s;
	text-align: center;
	line-height: 100px;
	font-size: 50px;
	font-weight: bold;
	color:yellow;
	text-shadow: -2px 2px 5px #000,
				 -4px 0px 5px #fff;
	box-shadow: 0px 0px 50px 20px #F4F212;
}
